<template>
  <div class="banner-container">
    <!-- 这里的宽度是300%，但是将来被使用时是几张图片，未知，因此这里的宽度应该动态生成 不能再写死  style="width: 300%;"   -->
    <!-- 采用vue的写法就是，style是一个对象，里面有一个属性为 width 值是banners的长度乘以100 最后拼接上 % -->
    <ul class="images" :style="{
			width:banners.length*100+'%',
			marginLeft:-index*100+'%'
		}">
      <li v-for="(item,i) in banners" :key="i">
        <a :href="item.href">
          <img :src="item.url" alt="">
        </a>
      </li>
    </ul>

    <ul class="dots">
      <li v-for="(item,i) in banners" :key="i" :class="{
				active:i===index
			}"
          @click="indexChange(i)index=i"
      ></li>
    </ul>
  </div>
</template>

<script>
//作为一个插件在被使用的时候，需要哪些数据
/* 当前的插件需要传递的数据有
 1.有哪些banner
 2.多长事件轮播一次
 3.点击后往那里跳转
 4.当前显示的是第几张
 其中有些数据是需要使用该插件的父级，传递进来称之为属性，有的是自己的数据称之为数据
 */
export default {
  //表示需要传递进来的属性
  props: {
    //属性名:{}   //表示banner的数组
    banners: {
      //对属性进行一些修饰
      type: Array,		//类型为数组
      required: true	//必须传递
    },
    //表示轮播的间隔时间
    duration: {
      type: Number,	//类型为数字
      default: 2000	//默认值为2s
    }
  },
  //本插件自己的数据，不需要别人传递进来的，之所以要使用function return的方式，是因为每一个数据插件中的每一个数据使用需要隔离开来，彼此之间没有任何关联，如果使用的是 data:{index:0} 这样的方式，那么这里的index就是针对整个插件，但是有时有的数据只想给插件的某个地方使用。
  data() {
    return {
      index: 1,		//当前轮播到第几个
      timer: null
    }
  },
  //vue在渲染页面的时候，整个生命周期中的一步，指的是当整个dom渲染结束后
  created() {

  },
  /*
   第一次书写报错，说明这样写对象是不对的
   methods(){
       indexChange(i){
           index = i;
       }
   }
   */
  methods: {
    indexChange(i) {
      this.index = i;
    },
    autoStart() {
      /*
      开始一个计时器，触发间隔时间由使用者传递
       这里使用的箭头函数，而不是传统的function是因为，如果用传统的，那么在方法内部就无法使用this，在function中this将指向function本身，因此使用箭头函数
       */
      if (!this.timer) {
        this.timer = setInterval(() => {
          this.index = (this.index + 1) % this.banners.length;
        }, this.duration);
      }
    },
    autoStop() {
      clearInterval(this.timer);
      this.timer = null;
    }
  }

}
</script>

<style>
.banner-container {
  height: 350px;
  position: relative;
  overflow: hidden;
}

.banner-container li {
  display: block;
  width: 1080px;
  height: 100%;
  float: left;
}

.images {
  height: 100%;
  transition: 0.5s;
}

.banner-container img {
  width: 1080px;
  height: 100%;
}

.dots {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
}

.dots li {
  width: 10px;
  cursor: pointer;
  height: 10px;
  margin: 0 3px;
  border-radius: 50%;
  border: 1px solid;
  color: #fff;
}

.dots li.active {
  background: #fff;
}
</style>
